<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:replace="base::head(~{})"></head>
<body class="layui-anim layui-anim-up">
<div class="x-nav">
		<span class="layui-breadcrumb">
			<a href="#">首页</a>
			<a>
				<cite th:text="${title}"></cite>
			</a>
		</span>
</div>
<div class="x-body">
    <div class="layui-row">
        <form class="layui-form">
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input type="text" id="hospital" name="hospital" placeholder="医院名称" lay-verify="number"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <input type="text" id="name" name="name" placeholder="姓名" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <input type="text" id="phone" name="phone" placeholder="手机号" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <input type="text" id="city" name="city" placeholder="城市" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <input type="text" id="department" name="department" placeholder="科室" autocomplete="off"
                           class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <input type="text" id="scores" name="scores" placeholder="分数" lay-verify="number" autocomplete="off"
                           class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <input type="text" id="time" name="time" placeholder="考试时间秒" lay-verify="number" autocomplete="off"
                           class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <input type="text" id="createTimeBegin" name="createTimeBegin" placeholder="日期(开始)"
                           class="layui-input" readonly="readonly">
                </div>
                <div class="layui-input-inline">
                    <input type="text" id="createTimeEnd" name="createTimeEnd" placeholder="日期(结束)" class="layui-input"
                           readonly="readonly">
                </div>
                <button type="reset" class="layui-btn">重置</button>
                <button class="layui-btn" lay-submit="" lay-filter="search">搜索</button>
            </div>
            <div class="layui-form-item">
                <button type="button" class="layui-btn" id="download">
                    <i class="layui-icon">&#xe601;</i>导出成绩
                </button>
            </div>
        </form>
    </div>
    <table class="layui-hide" id="table" lay-filter="table"></table>
</div>
</body>
<script type="text/html" id="toolbarOpt">
    <div class="layui-inline" lay-event="add"><i class="layui-icon layui-icon-add-1"></i></div>
    <div class="layui-inline" lay-event="delete"><i class="layui-icon layui-icon-delete"></i></div>
</script>
<script type="text/html" id="lineOpt">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script th:inline="javascript">
    var getParams = function () {
        var data = {
            hospital: $('#hospital').val(),
            name: $('#name').val(),
            phone: $('#phone').val(),
            city: $('#city').val(),
            department: $('#department').val(),
            scores: $('#scores').val(),
            time: $('#time').val(),
            createTimeBegin: $('#createTimeBegin').val(),
            createTimeEnd: $('#createTimeEnd').val()
        }
        return data;
    }
    layui.use(['form', 'laydate', 'table'], function () {
        var form = layui.form, laydate = layui.laydate //日期
            , table = layui.table //表格

        laydate.render({
            elem: '#createTimeBegin',
            type: 'datetime'
        });
        laydate.render({
            elem: '#createTimeEnd',
            type: 'datetime'
        });

        //执行一个table实例
        var currPage = 1;
        var tableList = table.render({
            elem: '#table',
            url: ctxPath + '/exam/personInfo/paging', //数据接口
            where: getParams(),
            title: '',//定义 table 的大标题（在文件导出等地方会用到）
            page: true,//开启分页
            toolbar: '#toolbarOpt',//开启工具栏
            defaultToolbar: ['filter'],
            limits: [10, 50, 100],//每页条数的选择项，
            even: true,//隔行背景
            text: {
                none: '暂无相关数据' //默认：无数据。
            },
            cols: [[ //表头
                {type: 'checkbox', fixed: 'left'},
                {field: 'hospital', title: '医院名称', width: 150},
                {field: 'name', title: '姓名', width: 150},
                {field: 'phone', title: '手机号', width: 150},
                {field: 'city', title: '城市', width: 150},
                {field: 'department', title: '科室', width: 150},
                {field: 'scores', title: '分数', width: 150},
                {field: 'time', title: '考试时间秒', width: 150},
                {field: 'createTime', title: '创建时间', width: 150},
                {fixed: 'right', title: '操作', width: 250, align: 'center', toolbar: '#lineOpt'}
            ]],
            request: {
                pageName: 'pageNumber', //页码的参数名称，默认：page
                limitName: 'pageSize' //每页数据量的参数名，默认：limit
            },
            done: function (res, curr, count) {
                //获取删除后重载页码
                if (res.data.length == 1) {
                    currPage = curr - 1;
                } else {
                    currPage = curr;
                }
            }
        });
        //监听行数据事件
        table.on('tool(table)', function (obj) {
            //注：tool是工具条事件名，test是table原始容器的属性 lay-filter='对应的值'
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            var id = data.id;
            switch (layEvent) {
                case 'detail':
                    admin_medium_window('查看', ctxPath + '/exam/personInfo/detail?id=' + id);
                    break;
                case 'del':
                    admin_del_data(id, ctxPath + '/exam/personInfo/delete', currPage);
                    break;
                case 'edit':
                    admin_medium_window('编辑', ctxPath + '/exam/personInfo/toEdit?id=' + id);
                    break;
            }
        });
        //监听头部工具栏事件
        table.on('toolbar(table)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'add':
                    admin_medium_window('新增', ctxPath + '/exam/personInfo/toAdd');
                    break;
                case 'delete':
                    var data = checkStatus.data;
                    var ids = new Array()
                    $.each(data, function (index, item) {
                        ids[index] = item.id;
                    });
                    admin_del_data(ids, ctxPath + '/exam/personInfo/delete', currPage);
                    break;
            }
        });
        //监听提交
        form.on('submit(search)', function (data) {
            table.reload('table', {
                page: {curr: currPage},
                where: getParams()
                //设定异步数据接口的额外参数
            });
            return false;
        });
        $('#download').on('click', function () {
            window.location.href = ctxPath + "/exam/personInfo/download"
        });
    });
</script>
</html>